import { computed, defineComponent, ref } from 'vue';
import Avatar from './Avatar.vue';
import Basic from './Basic.vue';
import Color from './Color.vue';
import Label from './Label.vue';
import Name from './Name.vue';
import Sanitize from './Sanitize.vue';
import Size from './Size.vue';
import SlotAvatarStampName from './SlotAvatarStampName.vue';
import SlotDefault from './SlotDefault.vue';
import Stamp from './Stamp.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Avatar</h5>
            <Avatar />
          </div>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>Color</h5>
            <Color />
          </div>
          <div class='block-'>
            <h5 class='title'>Label</h5>
            <Label />
          </div>
          <div class='block-'>
            <h5 class='title'>Name</h5>
            <Name />
          </div>
          <div class='block-'>
            <h5 class='title'>Sanitize</h5>
            <Sanitize />
          </div>
          <div class='block-'>
            <h5 class='title'>Size</h5>
            <Size />
          </div>
          <div class='block-'>
            <h5 class='title'>SlotAvatarStampName</h5>
            <SlotAvatarStampName />
          </div>
          <div class='block-'>
            <h5 class='title'>SlotDefault</h5>
            <SlotDefault />
          </div>
          <div class='block-'>
            <h5 class='title'>Stamp</h5>
            <Stamp />
          </div>
        </div>
      );
    };
  },
});
